<#import "/ucenter/_layout.html" as layout>
<@layout.header "基本资料">
    <link rel="stylesheet" href="/static/libs/jcrop/css/jquery.jcrop.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/libs/jquery-file-upload/css/jquery.fileupload.css">
    <style type="text/css">
        #uploader {height: 50px; !important;}
    </style>
</@layout.header>
<@layout.body>
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-left">
                        <li class="breadcrumb-item"><a href="#">用户</a></li>
                        <li class="breadcrumb-item active">我的头像</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
                <div class="col-xs-12">
                    <div class="card card-primary">
                        <div class="card-body">
                            <form id="myForm"
                                  class="form-horizontal"
                                  autocomplete="off"
                                  action="/ucenter/user/doSaveAvatar"
                                  method="post"
                                  ok="">
                                <input type="hidden" name="path" id="path">
                                <input type="hidden" name="x" id="x">
                                <input type="hidden" name="y" id="y">
                                <input type="hidden" name="w" id="w">
                                <input type="hidden" name="h" id="h">
                                <input type="hidden" name="uid" value="#(user.id)">
                                <div class="box-body ">
                                    <div id="uploader">
                                <span class="btn btn-block btn-primary fileinput-button" style="width: 120px">
                                    <i class="glyphicon glyphicon-plus"></i>
                                    <span>选择图片...</span>
                                    <input id="cfile" type="file" name="file">
                                </span>
                                    </div>
                                    <div class="text-center" style="margin-bottom: 20px">
                                        <div style="max-width:500px;margin: auto">
                                            <img src="/static/img/avatar.png" style="width: 100%;height: 100%"
                                                 id="avatarimg">
                                        </div>
                                    </div>
                                </div>

                                <div class="box-footer">
                                    <div class="col-sm-10 submit-block">
                                        <div class="box-submit">
                                            <button type="submit" class="btn btn-primary"> 保存选择区域</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
        </div>
    </section>
</@layout.body>
<@layout.script>
    <script src="/static/libs/jcrop/js/jquery.jcrop.min.js"></script>
    <script src="/static/libs/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
    <script src="/static/libs/jquery-file-upload/js/jquery.iframe-transport.js"></script>
    <script src="/static/libs/jquery-file-upload/js/jquery.fileupload.js"></script>
    <script>

        var jcrop_api;
        $('#cfile').fileupload({
            dropZone: $('#uploader'),
            url: '/admin/attachment/doUploadOfCKEditorBrowse',
            sequentialUploads: true,
            done: function (e, data) {
                if (data.result.code == 1) {
                    if (jcrop_api) {
                        jcrop_api.destroy()
                    }
                    var src = jeegot.spath + data.result.src;
                    $("#path").val(data.result.src);
                    $("#avatarimg").attr("src", src);
                    $('#avatarimg').Jcrop({
                        setSelect: [30, 30, 250, 250],
                        minSize: [50, 50],
                        aspectRatio: 1,
                        onSelect: updateSelect,
                        onChange: updateSelect
                    }, function () {
                        jcrop_api = this;
                    });
                }
            }
        });

        function updateSelect(c) {
            $('#x').val(c.x);
            $('#y').val(c.y);
            $('#w').val(c.w);
            $('#h').val(c.h);
        }

        submitForm({}, {});
    </script>
</@layout.script>